<template>
  <div>
    <div class="search">
      <span class="name">名称：</span>
      <el-input clearable v-model="inputName" placeholder="请输入" />
      <span class="name">项目：</span>
      <el-select clearable v-model="inputProject" placeholder="请选择项目">
        <el-option
          v-for="item in projectList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button type="success" size="mini" icon="el-icon-search" @click="clickSearch">搜索</el-button>
    <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="clickReset">重置</el-button>
    </div>
    <!-- <search :has-status="false" :has-name="true" :has-labs="false" @search="clickSearch" /> -->
    <div class="list">
      <template v-if="data.length>0">
        <div
          v-for="(item,index) in data"
          :key="index"
          :class="[chooseList.find(v=>item.id===v.id&&item.name===v.name)? 'current':'']"
          class="item"
          :title="item.name"
          @click="chooseItem(item)"
        >
          {{ item.name }}
        </div>
      </template>

      <el-empty v-else description="暂无物品可领用" class="empty" />
    </div>

    <!-- 产品信息弹框 -->
    <productInfo v-if="isShowDialog" :is-show="isShowDialog" :product="currentProduct" @close="isShowDialog = false" />
  </div>
</template>

<script>
import search from '../../components/search.vue'
import { mapState } from 'vuex'
import productInfo from './productInfo.vue'
export default {
  components: {
    productInfo,
    search
  },
  props: {
    allData: {
      type: Array,
      default: () => [
        {
          id: 1,
          name: '硫酸钠hdshsud'
        },
      ]
    },
    chooseData: {
      type: Array,
      default: () => []
    },
    projectList:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      isShowDialog: false,
      currentProduct: {}, // 当前弹框信息
      data: [],
      inputName:'',
      inputProject: ''
    }
  },
  computed: {
    ...mapState('hjuser', ['chooseList'])
  },
  watch:{
    allData(n){
      this.data = JSON.parse(JSON.stringify(n))
    }
  },
  created() {
    this.data = JSON.parse(JSON.stringify(this.allData))
  },

  methods: {
    // 点击某个物料
    chooseItem(val) {
      this.isShowDialog = true
      this.currentProduct = val
    },
    clickSearch() {
      this.data = JSON.parse(JSON.stringify(this.allData))
      if (this.inputName === ''&&this.inputProject==='') {
        this.data = JSON.parse(JSON.stringify(this.allData))
      } else if(this.inputName !== ''&&this.inputProject ==='') {
        this.data = this.data.filter(item =>item.name.includes(this.inputName))
      }else if(this.inputName === ''&&this.inputProject !==''){
        this.data = this.data.filter(item =>item.projectList.some(v=>v.id==this.inputProject))
      }else {
        this.data = this.data.filter(item =>item.name.includes(this.inputName)&&item.projectList.some(v=>v.id==this.inputProject))
      }
    },
    clickReset(){
      this.inputName = ''
      this.inputProject = ''
      this. clickSearch()
    },
  },
}
</script>

<style scoped lang="scss">
@import '@/views/website/style/hjUserSearch.scss';
.current {
  background-color: #638ae9;
  color: #fff;
}

.list {
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  max-height: 750px;
  background-color: #fff;
  .item {
    padding: 5px;
    margin: 0 18px 15px 0;
    cursor: pointer;
    width: 154px;
    height: 50px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #638ae9;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }
}

.empty {
  margin: 0 auto;
}
</style>
